import React, { useState, useEffect, useRef, useCallback } from "react";
import { NavBar, Space, Swiper, Image, SearchBar, Grid, Ellipsis, Tag, Footer } from "antd-mobile";
import {
    UserOutline,
    HistogramOutline,
    ContentOutline,
    RightOutline,
    FireFill,
    ShopbagOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import styles from "../../App.scss";
import logo from "../../doc/logo.png";
import request from "../../utils/request";
import { connect } from "react-redux";

function Home(props) {
    // 获取首页轮播图数据
    const user = !!props.user[0];
    const [keyword, setKeyword] = useState("欢迎来到实力至上主义的教室");
    const [homebanner, setHomebanner] = useState([]);
    const getBanner = async () => {
        const { data } = await request.get("/swiper/list", {
            params: {
                page: 1,
                limit: 5,
                sort: "views",
            },
        });
        setHomebanner(data.data);
    };

    // 获取本期强推数据
    const [Hotnovel, setHotnovel] = useState([]);
    const getData = async () => {
        const { data } = await request.get("/books/list", {
            params: {
                page: 5,
                sort: "views",
            },
        });
        setHotnovel(data.data[0]);
    };

    // 获取本期强推数据
    const [newnovel, setNewnovel] = useState([]);
    const getNewnovel = async () => {
        const { data } = await request.get("/books/list", {
            params: {
                page: 10,
                limit: 4,
                sort: "views",
            },
        });
        setNewnovel(data.data[0]);
    };
    useEffect(() => {
        getBanner();
        getData();
        getNewnovel();
    }, []);

    const navigate = useNavigate();
    const goToHome = () => {
        navigate("/home");
    };

    const search = () => {
        navigate("/search?keyword=" + keyword);
    };

    const my = () => {
        navigate("/my");
    };

    const rank = () => {
        navigate("/rank");
    };

    const bookbox = () => {
        if (user) {
            navigate("/bookbox");
        } else {
            navigate("/my");
        }
    };

    const gotoDetail = useCallback((id) => {
        navigate("/detail?id=" + id);
        window.scrollTo(0, 0);
    }, []);

    return (
        <div>
            {/* 导航栏 */}
            <NavBar
                style={{ padding: 0 }}
                back={null}
                left={
                    <Image
                        src={logo}
                        onClick={() => {
                            goToHome();
                        }}
                    />
                }
                right={
                    <div>
                        <UserOutline
                            color="var(--adm-color-danger)"
                            style={{ fontSize: 20 }}
                            onClick={() => {
                                my();
                            }}
                        />
                    </div>
                }
            ></NavBar>
            {/* 搜索框和首页轮播图和功能 */}
            <Space direction="vertical">
                <SearchBar
                    onFocus={search}
                    placeholder="欢迎来到实力至上主义的教室"
                    style={{ "--background": "#e9e2e2" }}
                />
                <Swiper autoplay loop>
                    {homebanner.map((item) => (
                        <Swiper.Item key={item.id} onClick={gotoDetail.bind(null, item.id)}>
                            <div className={styles.content}>
                                <Image src={item.swiper} width="100%" height="8.5rem" fit="fill" />
                            </div>
                        </Swiper.Item>
                    ))}
                </Swiper>

                <Grid columns={3} gap={1}>
                    <Grid.Item key={"ShopbagOutline"}>
                        <div className="nav">
                            <ShopbagOutline
                                color="var(--adm-color-danger)"
                                style={{ fontSize: 35 }}
                                onClick={() => {
                                    navigate("/shop");
                                }}
                            />
                            <p style={{ lineHeight: 0, fontSize: 12 }}>书城</p>
                        </div>
                    </Grid.Item>
                    <Grid.Item
                        key={"HistogramOutline"}
                        onClick={() => {
                            rank();
                        }}
                    >
                        <div className="nav">
                            <HistogramOutline color="var(--adm-color-danger)" style={{ fontSize: 35 }} />
                            <p style={{ lineHeight: 0, fontSize: 12 }}>排行榜</p>
                        </div>
                    </Grid.Item>
                    <Grid.Item key={"ContentOutline"}>
                        <div className="nav">
                            <ContentOutline
                                color="var(--adm-color-danger)"
                                style={{ fontSize: 35 }}
                                onClick={bookbox}
                            />
                            <p style={{ lineHeight: 0, fontSize: 12 }}>书架</p>
                        </div>
                    </Grid.Item>
                </Grid>
            </Space>
            {/* 本期强推 */}
            <Grid columns={1} gap={8}>
                <Grid.Item span={1} key={"homeTitle"}>
                    <div className="homeTitle_head">
                        <h3 className="homeTitle">本期强推</h3>
                    </div>
                </Grid.Item>
                <Grid.Item span={1} key={"homeTitle1"}>
                    <Swiper
                        trackOffset={5}
                        slideSize={35}
                        style={{
                            "--border-radius": "8px",
                        }}
                        defaultIndex={0}
                        indicator={() => null}
                    >
                        {Hotnovel.map((item) => (
                            <Swiper.Item key={item.id} onClick={gotoDetail.bind(null, item.id)}>
                                <div>
                                    <Image key={item.id} src={item.pic} width="90%" height="150px" fit="fill" />
                                    <Grid columns={1}>
                                        <Grid.Item span={1} key={item.id}>
                                            <Ellipsis className="nicebooks-title" direction="end" content={item.book} />
                                            <span className="nicebooks-author">{item.author}</span>
                                        </Grid.Item>
                                    </Grid>
                                </div>
                            </Swiper.Item>
                        ))}
                    </Swiper>
                </Grid.Item>
            </Grid>
            {/* 新书抢先 */}
            <Grid columns={1} gap={8} key={"homeTitle2"}>
                <Grid.Item span={1} key={"homeTitle2"}>
                    <div className="homeTitle_head">
                        <h3 className="homeTitle">新书抢先</h3>
                        <span className="more">
                            更多
                            <RightOutline />
                        </span>
                    </div>
                </Grid.Item>
                <Grid.Item span={1} key={"homeTitle3"}>
                    {newnovel.map((item) => (
                        <Grid columns={1} key={item.id} style={{ margin: "1em 0" }}>
                            <Grid.Item key={item.id} onClick={gotoDetail.bind(null, item.id)}>
                                <div className="newnovel">
                                    <Image
                                        key={item.id}
                                        src={item.pic}
                                        width="120px"
                                        height="90px"
                                        fit="fill"
                                        style={{ marginRight: 5 }}
                                    ></Image>
                                    <div className="newnovel-content">
                                        <span style={{ fontSize: "16px", fontWeight: "bold" }}>{item.book}</span>
                                        <Ellipsis
                                            style={{ fontSize: "13px", color: "#808080" }}
                                            rows={2}
                                            direction="end"
                                            content={item.brief}
                                        />
                                        <div>
                                            <span style={{ lineHeight: 0, fontSize: "12px", color: "#808080" }}>
                                                <UserOutline />
                                                {item.author}
                                            </span>
                                            <span style={{ float: "right" }}>
                                                <Tag color="orange" fill="outline" style={{ marginRight: 4 }}>
                                                    {item.booktype}
                                                </Tag>
                                                <Tag color="red" fill="outline">
                                                    <FireFill />
                                                    {item.hot}
                                                </Tag>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </Grid.Item>
                        </Grid>
                    ))}
                </Grid.Item>
            </Grid>

            {/* 尾部 */}
            <Footer label="没有更多了" content="Copyright © 2022 趣学藏书阁"></Footer>
        </div>
    );
}

const mapStateToProps = function (state) {
    console.log("state.userInfo", state.userInfo);
    return {
        user: state.userInfo,
    };
};

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: "logout" });
        },
    };
};
Home = connect(mapStateToProps, mapDispatchToProps)(Home);

export default Home;
